{extend name="../index/public/mlay" /}
{block name="style"}
<style>
	.allChecked {
		background-image: url('__TEM_STATIC__/img/check.png');
		background-size: cover;
	}

	.copy {
		border: 1px solid #c5c5c5;
		border-radius: 30px;
		font-size: 0.6rem;
		float: right;
		padding: 0rem 0.5rem;
		line-height: 1rem;
		margin-top: 0.5rem;
	}
	
	.copy2{
		margin: 0;
		color: #000000;
	}

	.order_no {
		line-height: 2rem;
	}
	.buttom_detail{
		background: #a78928;
		color: #fff;
		border-radius: 30px;
		font-size: 0.75rem;
		padding: 8px 15px;
		/* margin: 0 0.5rem; */
		margin-right: 0.5rem;
	}
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
{/block}
{block name="header"}{/block}
{block name="container"}
<div id="app">
	<div style="margin:0.5rem 0.5rem 0 0.5rem;" v-cloak class="">
		<div style="background: #a78928;border-radius: 10px;padding: 0.5rem 0;color: #fff;padding-left: 0.5rem;"
			class="">
			<div class="flex ai_center">
				<img style="height: 1.5rem;margin-right: 0.5rem;" src="__TEM_STATIC__/img/icon/cart_i.png">
				<p style="font-size: 1rem;">{{status_txt}}</p>
			</div>
			<p style="font-size: 0.7rem;">{{tips}}</p>
		</div>
		<div v-if="this.detail.status>1" style="font-size: 0.7rem;margin-top: 0.5rem;background: #fff;border-radius: 10px;padding: 0.5rem;color: #999;" class="">
			<p>{{detail.ex_com}}</p>
			<span class="copy-text">
				运单号:<span v-cloak>{{detail.express}}</span>
				<span class="copy copy2" onclick="copythis(this)" data-clipboard-text="">复制</span>
			</span>
			<!-- <a :href="detail.express_url">物流查询</a> -->
		</div>
	</div>
	<div style="border-radius: 10px;margin: 0.5rem;font-size: 0.8rem;padding: 0.5rem 0;" class="flex bagfff ai_center">
		<img style="width: 1.4rem;height: 1.4rem;margin: 0 0.5rem;" src="__TEM_STATIC__/img/location.png">
		<div @click="qu" style="font-size: 0.65rem;width: 100%;" class="flex ju_sb ai_center">
			<div class="">
				<div v-cloak>{{address.name}} <span style="color: #999999;" v-cloak>{{address.mobile}}</span></div>
				<div style="justify-content: space-between;width: 100%;" class="">
					<div v-cloak>
						{{address.province}}{{address.city?address.city:'暂无地址点击去添加'}}{{address.country}}{{address.address}}
					</div>
				</div>
			</div>
			<img style="width: 15px;height: 15px;" src="__TEM_STATIC__/img/my/rightThearrow.png">
		</div>
	</div>

	<div style="margin: 0.5rem;padding-top: 1rem;border-radius: 10px;" class="bagfff">
		<div v-for="(item,index) in Data" :key="index" style="font-size: 0.7rem;">
			<div style="" class="flex ju_sb">
				<img v-cloak style="width: 3.75rem;height: 3.75rem;border-radius: 10px;margin: 0 0.3rem;"
					:src="item.cover">
				<div style="flex: 1;" class="">
					<div class="">
						<div class="" v-cloak>
							{{item.title}}
						</div>

					</div>
					<div style="margin-right: 0.5rem;">
						<div style="font-size: 0.6rem;margin-top: 0.5rem;" v-cloak id="">
							<span style="text-decoration:line-through" v-cloak>原价¥{{item.price}}</span>
							<span v-cloak>折扣{{item.discount}}</span>
						</div>
					</div>
				</div>
			</div>

			<div style="font-size: 0.7rem;padding: 0 0.5rem 0 0.5rem;" class="">

				<div v-if="item.remark.length!=0" style="padding: 0.5rem 0;" class="">
					订单备注 <span style="color: #999999;" v-cloak>{{item.remark}}
					</span>
				</div>
				<div style="text-align: right;padding: 0.5rem 0;" id="">
					<span style="color: #999999;" v-cloak>x{{item.number}}</span><span style="color: #a78928;"
						v-cloak>￥{{item.pay_price}}</span>
				</div>
			</div>
			<div style="padding-left: 0.5rem;" class="order_no">
				<div v-if="out_trade_no!=0" class="">
					<span style="margin-right: 0.5rem;display: inline-block;color: #92A4AD;">订单编号</span>
					<span class="copy-text">
						<span v-cloak>{{out_trade_no}}</span>
						<span class="copy" onclick="copythis(this)" data-clipboard-text="">复制</span>
					</span>
				</div>
				<div class="">
					<span style="margin-right: 0.5rem;display: inline-block;color: #92A4AD;">下单时间</span><span
						v-cloak>{{create_time}}</span>
				</div>
				<div class="">
					<span style="color: #92A4AD;margin-right: 0.5rem;">订单折扣</span><span v-cloak>{{item.discount}}</span>
				</div>
				<div class="">
					<span style="color: #92A4AD;margin-right: 0.5rem;">订单备注</span><span
						v-cloak>{{item.remark?item.remark:'无'}}</span>
				</div>
			</div>
		</div>
		<div style="padding: 0.5rem 0;font-size: 0.7rem;margin-left: 0.5rem;" class="">
			<span style="color: #999999;">余额支付</span> <span v-cloak>{{detail.balance+detail.second}}元
			</span>
		</div>
		<div style="padding: 0.5rem 0;font-size: 0.7rem;margin-left: 0.5rem;" class="">
			<span style="color: #999999;">微信支付</span> <span v-cloak>{{detail.realpay}}元
			</span>
		</div>

		<div class="" style="text-align: center;" v-cloak>
			{{res_msg}}
		</div>
	</div>
	<div v-if="payment" style="width: 100%;position: fixed;bottom: 0;text-align: right;padding: 1.5rem 0;"
		class="bagfff">
		<span style="font-size: 0.65rem;margin-right: 0.5rem;">
			<span style="color: #C5C5C5;" v-cloak>共{{sum}}件</span> <span>合计</span><span
				style="color: #a78928;font-size: 0.75rem;" v-cloak>￥{{pay_price}}</span>
		</span>
		<span v-if="status<2" @click="cancel" class="buttom_detail"
			style="background: #df0000;">
			取消
		</span>
		<span v-if="this.status==0" @click="submit_orders" class="buttom_detail">
			提交支付
		</span>
		<span v-if="this.status==1" class="buttom_detail">
			待发货
		</span>
		<span @click="action" v-if="this.status==2" class="buttom_detail">
			确认收货
		</span>
	</div>
</div>
{/block}
{block name="page-footer"}<div class="footer"></div>{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="__TEM_STATIC__/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 复制插件 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> -->
<script src="__TEM_STATIC__/js/public/clipboard.min.js"></script>
<script>
	var clipboard = new ClipboardJS('.copy');
	clipboard.on('success', function(e) {
		alert("复制成功")
		e.clearSelection();
	});
	clipboard.on('error', function(e) {
		alert("复制失败")
	});

	function copythis(data) {
		/*原生*/
		data.setAttribute("data-clipboard-text", data.parentNode.getElementsByTagName('span')[0].innerHTML)
	}
	var settlement = new Vue({
		el: "#app",
		data() {
			return {
				payment: true,
				allChecked: false, //全选状态  true|false
				Data: [],
				address: {},
				pay_price: '',
				tips: '',
				res_msg: '',
				id: '', //商品订单的id
				out_trade_no: '', //订单编号
				create_time: '', //下单时间
				status_txt: '', //订单状态
				status: '', //
				balance: '', //首单余额
				detail: {},
			}
		},
		//计算属性	
		computed: {
			totalPrice() { //总价
				let totalPrice = 0
				for (let i = 0; i < this.Data.length; i++) {
					totalPrice += this.Data[i].price * this.Data[i].number
				}
				return Number(totalPrice.toFixed(2)); //总价
			},
			sum() { //总数
				let sum = 0
				for (let i = 0; i < this.Data.length; i++) {
					sum += this.Data[i].number
				}
				return sum; //总数
			},
		},
		//监听属性
		watch: {

		},
		//钩子函数	
		created() {
			this.shuju()
		},
		mounted() {

		},
		methods: {
			click: function() {
				this.allChecked = !this.allChecked;
				console.log(this.allChecked);
			},
			shuju: function() {
				var that = this
				$.post("", {}, function(res) {
					console.log(res);
					if (res.code == 1) {
						that.Data = res.data.list
						that.id = res.data.id
						that.address = res.data.address
						that.pay_price = res.data.pay_price
						that.tips = res.data.tips
						that.out_trade_no = res.data.out_trade_no
						that.create_time = res.data.create_time
						that.status_txt = res.data.status_txt
						that.status = res.data.status
						that.balance = res.data.balance //首单余额
						that.detail = res.data//
						// console.log(that.status_txt);
						// console.log(that.Data);
					} else {
						that.res_msg = res.msg
						console.log(res.msg);
					}

				});
			},
			qu() {
				window.location.href = "{:url('user/vip/address')}"

			},
			submit_orders() {
				var that = this
				// console.log('提交订单');
				vant.Dialog.confirm({
						title: '支付提醒',
						message: `首单余额：￥ ${this.detail.balance}\n补货余额：￥ ${this.detail.second}\n微信支付：￥ ${this.detail.realpay}`,
						confirmButtonText: '支付'
					})
					.then(() => {
						// on confirm
						$.post("{:url('mall/order/pay')}", {
							id: that.id //商品的id
						}, function(res) {
							console.log(res);
							if (res.code == 1) {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', res.data,
									function(resault) {
										if (resault.err_msg == "get_brand_wcpay_request:ok") {
											weui.topTips('支付成功', {
												className: 'success'
											});
											that.shuju()
											that.payment = false
										} else {
											weui.topTips('支付失败');
										}
									});
							} else if (res.code == 0) {
								weui.topTips(res.msg);
								// console.log(res.msg);
							} else {
								weui.topTips('支付成功', {
									className: 'success'
								});
								that.shuju()
							}
						
						});
					})
					.catch(() => {
						// on cancel
					});
				console.log(that.id);
			},
			cancel() {
				let that = this
				weui.confirm("订单撤销后，会自动退回已支付的款项，且不可恢复订单！确定撤销吗？", {
				    title: '撤销订单',
				    buttons: [{
				        label: '取消',
				        type: 'default',
				        onClick: function(){ console.log('no') }
				    }, {
				        label: '确认',
				        type: 'primary',
				        onClick: function(){
							$.post("{:url('mall/order/delete')}", {
								id: that.id //商品订单的id
							},function(res) {
								if(res.code == 1){
									vant.Toast.success(res.msg);
									window.history.go(-1); //返回上一页
								} else {
									vant.Toast.fail(res.msg);
								}
							})
						}
				    }]
				});
			},
			
			action() {
				let that = this
				$.post("{:url('mall/order/action')}", {
					id: that.id //商品订单的id
				},function(res) {
					if(res.code == 1){
						vant.Toast.success(res.msg);
						that.shuju();
					} else {
						vant.Toast.fail(res.msg);
					}
				})		
			}
			
		}
	})
</script>
{/block}
